<template>
  <div class="wechat-main">
    <p class="title">第三方登录</p>
    <img :src="wx" @click="handleClick" alt="">
  </div>
</template>

<script>
import wx from '../../assets/common/wx.png'
export default {
  data() {
    return {
      wx,
    }
  },
  methods: {
    handleClick() {
      this.$toast(`微信登录`)
    }
  },
};
</script>

<style lang="less" scoped>
.wechat-main {
  width: 100%;
  font-size: 4vw;
  position: fixed;
  z-index: 999;
  bottom: 15vw;
  left: 0;
  .title {
    position: relative;
    text-align: center;
    margin-bottom: 10vw;
  }
  .title::before {
    content: "";
    display: block;
    width: 25vw;
    position: absolute;
    border-bottom: 1px solid #ddd;
    left: 13vw;
    top: 2.5vw;
  }
  .title::after {
    content: "";
    display: block;
    width: 25vw;
    position: absolute;
    border-bottom: 1px solid #ddd;
    right: 13vw;
    top: 2.5vw;
  }
  img {
    width: 15vw;
    height: 15vw;
    display: block;
    margin: 0 auto;
  }
}
</style>